<template>
	<view>
					<x-video width="100%" height="300px" 				ref="videoPlayer" 
				:progress="progress"
				:src="nowSrc" />
		
		<u-tabs  :current="acIndex"  lineWidth="80"  itemStyle="padding-bottom: 5px; padding-right: 15px; width: 15vw;"   class="mytab" :list="list1" @click="click">
		</u-tabs>
		<view v-if="acIndex==0">
				  <!-- 目录 -->
				 <view class="dirList">
						 <view class="dir_one" v-for="(item,index) in CDlist" :key="item._id"> 
							 <view class="dir_title">
								 <text style="margin:0 20px;">第{{index+1}}章</text> <text>{{item.CDName}}</text> 
							 </view>
							 <!-- 视频列表 -->
						 	<video-list :dirNumber="index+1" :_id="item._id" :CDid="_id"></video-list>
					
						 </view>
					 </view>
					 
		</view>
		<view v-if="acIndex==1">
			 <view class="pj_list">
				 <view class="list_one" v-for="item in evaluateListCom"
				 :key="item.ID">
						 <image src="../../static/index1.png"></image>
						 <view class="one_rigth">
							<view>{{item.UserId}}</view>
							<view>{{new Date(item.createAt).toLocaleString()}}</view>
							<view>{{item.evaluate}}</view>
						 </view>
				 </view>
			 </view>
			 <view class="pj_text">
				 <view>
					<u-input v-model="evaluate" placeholder="输入评价"></u-input>
				 </view>
				 <view>
					  <u-button type="success" @click="toPj">发布</u-button>
				 </view>
			 </view>
		</view>
	</view>
</template>

<script>
	import {getCourseOnLogin,getCouseDir,toPjApi} from '@/api/learn.js'
	import videoList from './videoList.vue'
	export default {
		components:{videoList},
		data(){
			return {
				evaluateList:[],//评价列表
				progress:0,
				videoItem:{},
				evaluate:"",//评价
				acIndex:0,
				nowSrc:'',
				ID:"",
				_id:"",
				courseInfo:{},
				list1: [{
					name: '章节',
				}, {
					name: '评论',
				}, {
					name: '问答'
				}, {
					name: '推荐'
				}, ],
				CDlist:[]//目录信息
			}
		},
		created(){
			// 用evnetbus接受数据
			this.$bus.$on('sendVideo',(videoItem)=>{
				console.log(videoItem,"******************")
				this.videoItem=videoItem;
			
				this.nowSrc='http://127.0.0.1:3000/'+videoItem.Vurl;
			
			})
		},
		onLoad(options){
			this.ID=options.ID;
			this._id=options._id;
			this.getInfo();
			this.getDirList()
		},
		computed:{
			evaluateListCom(){
				return this.evaluateList.reverse()
			}
		},
		methods:{
			async toPj(){ //评价接口
				let res=await toPjApi({
					courseId:this.ID,
					evaluate:this.evaluate,
					userName:uni.getStorageSync("user").name
				})
				console.log(res,"%%%%%%%%%%%%%%%%")
				if(res.success){
					uni.showToast({
						title:"评论成功"
					})
					this.evaluate=''
					// res.pjlist; 最新的评论数组
					this.evaluateList=res.pjlist;

				}
			},
			click(item) { //tab切换
				console.log('item', item);
				this.acIndex=item.index;
			},
			async getInfo(){ //获取课程基本信息
				let res=await getCourseOnLogin(this.ID)
				console.log(res)
				this.courseInfo=res.data;
				this.evaluateList=res.data.evaluate.list;//评价数据
			},
			async getDirList(ID){ //获取课程下目录接口
				let res=await getCouseDir(this.ID);
				console.log(res,"^^^^^^^^^")
				this.CDlist=res.data.list; //目录信息
			}
		}
	}
</script>

<style lang="scss">
	.myvideo{
		width: 100vw;
		height: 300px;
	}
	.pj_list{
		width: 100vw;
		.list_one{
			width: 100vw;
			display: flex;
			height: 200px;
			border-bottom: 1px solid black;
			image{
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin: 20px;
			}
			.one_rigth{
				flex:1;
				view{
					margin-top: 30px;
					font-size: 20px;
				}
			}
		}
	}
	.pj_text{
		width: 100%;
		position: fixed;
		height: 50px;
		left: 0;
		bottom: 0;
		display: flex;
		background: white;
		align-items: center;
		>view:nth-child(1){
			flex:1;
		}
		>view:nth-child(2){
			width: 180px;
		}
	}
</style>